<template>
	<view class="load" v-if="!load">
      <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
    </view>
	<view v-else class="">
		<view class="search">
			<u-search
				inputAlign="left"
				placeholder="请输入关键字搜索"
				:clearabled="true"
				search-icon-color="#111111"
				@search="search()"
				v-model="searchVal"
				height="30"
				@clear="celSearch"
				:show-action="false"
			></u-search>
		</view>
		<view class="shopTitle" @click="nav_to('/pages/mall/shoporder')">兑换记录</view>
		<view class="shoplist" v-if="shop_list.length > 0">
			<view class="shopcont" v-for="(item,index) in shop_list" :key="index" @click="nav_to('/pages/mall/detail?id='+item.ID)">
				<image class="shopimg" :src="restoreImg(item.Images)[0]" mode="aspectFill"></image>
				<view class="shopname">{{$util.entitiesToUtf16(item.ProductName)}}</view>
				<view class="shopbtn">
					<view class="shopprice">
						<block v-if="item.Price>0 && item.PV>0">
							<text class="pricetitle">{{'￥'}}</text>
							<text class="pricetext">{{changePV(item.Price)}}</text>
							<text class="pricetitle">{{'+'}}</text>
							<text class="pricetext">{{changePV(item.PV)}}</text>
							<text class="pricetitle">{{'挥豆'}}</text>
						</block>
						<block v-else>
							<text class="pricetitle" v-if="item.Price>0">{{'￥'}}</text>
							<text class="pricetext">{{item.PV?changePV(item.PV):changePV(item.Price)}}</text>
							<text class="pricetitle" v-if="item.PV>0">{{'挥豆'}}</text>
						</block>
					</view>
					<view class="Exchange">兑换</view>
				</view>
			</view>
		</view>
		<view v-else style="margin-top: 20px;">
			<u-empty mode="list" width="100" height="100" icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true" iconSize="32" text="暂无商品"></u-empty>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			load:false,
			Name: '',
			shop_list: [],
			searchVal: '',
			shopIndex:1,
			shopSize:10,
		};
	},
	onLoad() {
		this.get_shop();
	},
	//下拉刷新
  onPullDownRefresh(){
    this.PageIndex = 1
    if(this.navindex == 0){
      this.getActList()
    }else{
        this.getteam()
    }
    uni.stopPullDownRefresh()
  },
  // 触底事件
  onReachBottom() {
	this.shopIndex++
	this.get_shop()
  },
	methods: {
		changePV(pv){
			if(pv > 10000){
				return (pv / 10000).toFixed(1)+'万'
			}else{
				return pv
			}
		},
		celSearch() {
			this.showSearch = false;
			this.searchVal = '';
			this.get_shop()
		},
		search() {
			this.$util.throttle(async () => {
				this.shopIndex = 1
				this.get_shop();
			}, 300);
		},
		async get_shop() {
			let res = await this.$api.post('/Products/PageList', {
				PageIndex: this.shopIndex,
				PageSize: this.shopSize,
				ProductName: this.searchVal,
				Type:3
			});
			if(res.code == 0){
				if(this.shopIndex == 1){
					this.shop_list = res.data;
				}else{
					this.shop_list = this.shop_list.concat(res.data)
				}
				this.load = true
			}
			
			console.log(this.shop_list);
		},
		goProduct(id) {
			uni.navigateTo({
				url: `/pages/mall/detail?id=${id}`,
			});
		},
		restoreImg(Images) {
			let str = Images || '';
			if (str.includes('.png') || str.includes('.jpg') || str.includes('.jpeg') || str.includes('.webp')) {
				let imglist = Images.split(',') || []

				return imglist
			} else {
				return []
			}

		},
	},
};
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}
.null {
	width: 100%;
	height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #999;
	font-size: 26rpx;
	image{
		width: 340rpx;
	}
}
.search {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 32rpx;
	background: #fff;
	// text-align: left;
	z-index: 99;
}
.shopTitle{
		font-size: 28rpx;
		color: #706EEE;
		text-decoration: underline;
		text-align: right;
		position: relative;
		top: 140rpx;
		width: 90%;
		margin: 0 auto;
	}
.shoplist{
	width: 90%;
	margin: 32rpx auto;
	position: relative;
	top: 140rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	.shopcont{
		width: 328rpx;
		height: 480rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 32rpx;
		.shopimg{
			width: 328rpx;
			height: 292rpx;
			background-color: #706EEE;
			border-radius: 16rpx 16rpx 0 0;
		}
		.shopname{
			font-size: 28rpx;
			color: #10100F;
			margin: 20rpx;
			width: 300rpx;
			height: 76rpx;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			white-space: normal;

		}
		.shopbtn{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 20rpx;
			.shopprice{
				display: flex;
    			align-items: center;
				.pricetext{
					font-size: 36rpx;
					font-weight: bold;
					color: #FC201C;
					margin-right: 4rpx;
				}
				.pricetitle{
					font-size: 24rpx;
					color: #FC201C;
				}
			}
			.Exchange{
				width: 112rpx;
				height: 52rpx;
				background: #706EEE;
				border-radius: 26rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #fff;
			}
		}	
	}
}
</style>
